<!--音频-->

<head>
    <link rel="stylesheet" href="css/player.css" />
</head>


<!-- 左侧播放器 开始-->
<div class="bane">
    <div class="vc_cont">
        <div id="jp_container_N" class="jp-video jp-video-270p jp-state-playing" role="application"
            aria-label="media player">
            <div class="jp-type-playlist">
                <div id="jquery_jplayer_N" class="jp-jplayer">
                    <audio id="jp_audio_0" preload="metadata"
                        src="http://music.163.com/song/media/outer/url?id=31473269.mp3" title="那英"></audio>
                    <!--<video id="jp_video_0" preload="metadata" title="那英" style="width: 0px; height: 0px;"></video>-->
                </div>
                <div class="jp-gui">
                    <div class="jp-video-play" style="display: none;">
                        <button class="jp-video-play-icon" role="button" tabindex="0">播放</button>
                    </div>
                    <div class="jp-interface">
                        <div class="jp-progress">
                            <div class="jp-seek-bar" style="width: 100%;">
                                <div class="jp-play-bar" style="overflow: hidden; width: 97.5219%;"></div>
                            </div>
                        </div>
                        <div class="times">
                            <div class="jp-current-time" role="timer" aria-label="time">04:11</div> /
                            <div class="jp-duration" role="timer" aria-label="duration">04:17</div>
                        </div>

                        <div class="jp-controls-holder">
                            <div class="jp-controls">
                                <button class="jp-previous" role="button" tabindex="0">上一曲</button>
                                <button class="jp-play" role="button" tabindex="0">播放</button>
                                <button class="jp-next" role="button" tabindex="0">下一曲</button>
                                <!--<button class="jp-stop" role="button" tabindex="0">暂停</button>-->
                            </div>
                            <div class="jp-volume-controls">
                                <button class="jp-mute" role="button" tabindex="0">静音</button>
                                <button class="jp-volume-max" role="button" tabindex="0">最大音量</button>
                                <div class="jp-volume-bar">
                                    <div class="jp-volume-bar-value" style="width: 10%;"></div>
                                </div>
                            </div>
                            <!--<div class="jp-toggles">-->
                            <!--<button class="jp-repeat" role="button" tabindex="0">重复</button>-->
                            <!--<button class="jp-shuffle" role="button" tabindex="0">随机</button>-->
                            <!--&lt;!&ndash;<button class="jp-full-screen" role="button" tabindex="0">全屏</button>&ndash;&gt;-->
                            <!--</div>-->
                        </div>
                        <div class="jp-details">
                            <div class="jp-title" aria-label="title">那英</div>
                        </div>
                    </div>
                </div>
                <div class="jp-playlist flex_play shaw borad baibg ">
                    <div class="play_tit">
                        <h4>播放列表 <span class="iconfont icon-guanbi"></span> </h4>
                    </div>
                    <!--列表-->
                    <div class="jp-playlist-box play_list">
                        <ul>


                        </ul>
                    </div>
                    <div class="play_btn">
                        <a href="javascript:;">顺序播放</a> <a href="javascript:;" class="queens">定时关闭</a> <a
                            href="javascript:;" class="all_de">全部清除</a>
                    </div>
                </div>
                <div class="jp-no-solution" style="display: none;">
                    <span style="transform: rotate(180deg);">升级需要</span> 您浏览器赞不支持播放，请更新版本
                    <a href="http://get.adobe.com/flashplayer" target="_blank">Flash插件</a>.
                </div>
            </div>
            <!--歌曲列表滚动条-->
            <!--<div class="scrollBar" style="display: block;">-->
            <!--<div class="bar" style="top: 0px;"></div>-->
            <!--</div>-->
            <!--播放器展开隐藏按钮-->
            <!--<button type="button" class="folded_bt" title="点击收缩" id="btnfold" style="top: 52px;">-->
            <!--<span style="transform: rotate(180deg);"></span>-->
            <!--</button>-->
            <!--<div id="listRemove" style="display: block;"></div>-->
            <!--移除全部歌曲按钮-->
            <!--<div id="listClose"></div>-->
            <!--歌曲列表展开收缩按钮-->
        </div>
        <!-- 左侧播放器 结束-->
    </div>
</div>
<!--<script type="text/javascript" src="js/index.js"></script>-->
<!--播放器js-->
<!-- 弹出框-->
<div class="tailoring-container queen">
    <div class="tailoring-content tailoring-contentsss">
        <div class="tailoring-content-one">
            <h1>提示信息</h1>
            <div class="close-tailoring" onclick="closeTailors(this)">×</div>
        </div>
        <div class="tailoring-content-two queen_text">
            <h4> 10分钟后自动关闭音频 </h4>
            <button onclick="closeTailors(this)" class="pause"> 确定 </button>
        </div>
    </div>
</div>
<script src="js/player.js"></script>
<script src="js/playlist.js"></script>
<script src="js/player_database.js"></script>
<!--播放器js-->
<script>
    (window.onresize = function () {
        var win_height = $(window).height();
        var win_width = $(window).width();
        if (win_width <= 768) {
            $(".tailoring-contentss").css({
                "top": (win_height - $(".tailoring-contentss").outerHeight()) / 2,
                "left": 0
            });
        } else {
            $(".tailoring-contentss").css({
                "top": (win_height - $(".tailoring-contentss").outerHeight()) / 2,
                "left": (win_width - $(".tailoring-contentss").outerWidth()) / 2
            });
        }
        if (win_width <= 768) {
            $(".tailoring-contentsss").css({
                "top": (win_height - $(".tailoring-content").outerHeight()) / 2,
                "left": 0
            });
        } else {
            $(".tailoring-contentsss").css({
                "top": (win_height - $(".tailoring-content").outerHeight()) / 2,
                "left": (win_width - $(".tailoring-content").outerWidth()) / 2
            });
        }
        if (win_width <= 768) {
            $(".tailoring-contents").css({
                "top": (win_height - $(".tailoring-contents").outerHeight()) / 2,
                "left": 0
            });
        } else {
            $(".tailoring-contents").css({
                "top": (win_height - $(".tailoring-contents").outerHeight()) / 2,
                "left": (win_width - $(".tailoring-contents").outerWidth()) / 2
            });
        }

    })();
    //弹出框
    $(".queens").on("click", function () {
        $(".queen").show();
    });
    //关闭弹出框
    function closeTailors() {
        $(".queen").hide();
    }
    //<!--手动全部清除-->
    $(".all_de").click(function () {
        $('.jp-details').remove();
        myPlaylist.remove();
    })
//    console.log(myPlaylist)
    $(".flex_play h4 span").click(function () {
        $(".flex_play").hide();
        $(".flex_ic").show();
    });
    $(".flex_ic").click(function () {
        $(".flex_play").show();
        $(".flex_ic").hide();
    });
    // let arr = [10, 20, 30, 60];
    let m = 10;
    // 定时关闭
    $(".pause").click(function () {
        setTimeout(function () {
            myPlaylist.pause();
        }, m * 1000);
    });

</script>